<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>vector 2d angle</title>
		<script src="../libs/gbox3d/core.js"></script>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			//var startX, startY;
			//var endX, endY;

			var start = new gbox3d.core.Vect2d();
			var end = new gbox3d.core.Vect2d();
			var drag = false;
			var ctx;
			var angle = 0;
			
			window.requestAnimFrame = (function(callback) {
				return window.requestAnimationFrame || 
				window.webkitRequestAnimationFrame || 
				window.mozRequestAnimationFrame || 
				window.oRequestAnimationFrame || 
				window.msRequestAnimationFrame ||
				function(callback) {
					window.setTimeout(callback, 1000 / 60);
				};

			})();
			
			function animate() {
				
				var vec3d = new gbox3d.core.Vect2d(1,0);
				
				vec3d.rotate(-angle * gbox3d.core.DEGTORAD);
				vec3d.multiply(100);
				
				ctx.fillStyle='#00ff00';
				ctx.fillRect(0,0,320,480);
				
				ctx.beginPath();
				ctx.moveTo(100,100);
				ctx.lineTo(100+vec3d.X,100 + vec3d.Y);
				ctx.stroke();
				
				// request new frame
				requestAnimFrame(function() {
					animate();
				});
			}

			function mouseDownHandler(e) {

				start.set(e.pageX, e.pageY);
				drag = true;
				//$('p').text('touch start : xpos :' + e.pageX + 'ypos :' + e.pageY);
			}

			function mouseMoveHandler(e) {

				if(drag == true) {
					end.set(e.pageX, e.pageY);

					var dir_vect = end.sub(start);
					dir_vect.normalize();
					angle = dir_vect.getAngle();

					$('p').text('angle :' + angle);
				}
			}

			function mouseUpHandler(e) {

				if(drag == true) {
					end.set(e.pageX, e.pageY);

					var dir_vect = end.sub(start);
					dir_vect.normalize();

					$('p').text('angle :' + dir_vect.getAngle());
					drag = false;
				}
			}

			
			$(document).ready(function() {
				$(this).bind('mousedown', mouseDownHandler);
				$(this).bind('mouseup', mouseUpHandler);
				$(this).bind('mousemove', mouseMoveHandler);
				
  				ctx = $('#3darea')[0].getContext('2d');
				
				animate();

			});

		</script>
	</head>
	<body>
		<div align="center">
			<p>
				info
			</p>
			<canvas id="3darea" width="320" height="480" style="background-color:blue"></canvas>
		</div>
	</body>
</html>
